<template>
  <div class="component">
    <a href="javascript:;" class="box">
      <el-avatar
        :size="55"
        src="https://img0.baidu.com/it/u=2403478438,4001285120&fm=26&fmt=auto"
      >
        <img src="@/assets/img/noImg.png" />
      </el-avatar>
      <span class="text">{{ name }}</span>
      <!-- <svg-icon class="icon" iconClass="down"></svg-icon> -->
    </a>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
    }
  }
};
</script>

<style lang="scss" scoped>
.component {
  height: 60px;
  max-width: 160px;
  min-width: 100px;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;

  .box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .el-avatar {
      align-items: center;
      justify-content: center;
      display: flex;
      background-color: #f5f7fa;

      img {
        width: 60%;
        height: 60%;
      }
    }

    .icon {
      width: 0.8rem;
      height: 0.8rem;
    }

    .text {
      padding: 5px;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
    }

    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
      color: #303133;
    }
  }
}
</style>